<html>
<head>
    <title>运维管理</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        body{
            background: #F2F2F2;
        }
    </style>
</head>
<body>
<div class="page" id="page-monitor">
    <div class="page-title">运维管理 › 巡检记录</div>
    <el-card class="page-main" style="height: 100px">
        <el-row>
            <el-col :span="24">
                <el-form :inline="true">
                    <el-form-item label="请选择日期">
                        <el-date-picker type="date" v-model="day" placeholder="日期" style="width: 180px;"></el-date-picker>
                    </el-form-item>
                    <el-form-item style="padding-left:20px">
                        <el-button  @click="search" style="background-color: #578BBB">查询</el-button>
                    </el-form-item>
                    <div style="float: right">
                        <el-form-item >
                            <el-button  @click="addClick" style="background-color: #5DDBDD ">新增</el-button>
                        </el-form-item>
                    </div>
                </el-form>
            </el-col>
        </el-row>
    </el-card>
    <el-card >
        <el-row :gutter="10">
            <div >
                <el-col :span="5" v-for="(project,index) in items" :key="index" :offset="1" style="margin-bottom:40px" @click="checkInfo()">
                    <el-card :body-style="{ padding: '0px', height:'360px'}" shadow="hover" style="width: 320px;height: 320px;">
                        <div slot="header" class="clearfix">
                            <span>现场照明</span>
                            <el-button style="float: right; padding: 3px 0" type="text" @click="delCard">删除</el-button>
                        </div>
                        <div v-for="item in items" :key="item" class="text item" @click="checkInfo">
                            {{'列表内容 ' + item.content }}
                        </div>
                    </el-card>
                </el-col>
            </div>
        </el-row>
    </el-card>
    <el-dialog title="新增运维记录"
               :visible.sync="editFormVisible"
               center
               width="35%"
               :before-close="handleClose">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="创建人" >
                <el-input v-model="form.name" disabled></el-input>
            </el-form-item>
            <el-form-item label="创建时间">
                <el-input v-model="form.date1" disabled></el-input>
            </el-form-item>
            <el-form-item label="执行时间">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.date2" style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="标题" prop="title" :rules="[
                             {required:true,message:'标题不能为空!',trigger:'blur'}
                            ]">
                <el-input v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="内容" prop="desc" :rules="[
                             {required:true,message:'内容不能为空!',trigger:'blur'}
                            ]" >
                <el-input type="textarea" v-model="form.desc" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item style="text-align: center">
                <el-button @click="cancelClick" style="background-color: #7eb8b0  ">取消</el-button>
                <el-button  @click="submitClick('form')" style="margin-left: 40px;background-color: #f9b317;">保存</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>


<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>

    var vuePage=new Vue({
        el:'#page-monitor',
        data: {
            form: {
                name: '杭州开地',
                region: '',
                date1: '',
                date2: '',
                title:'',
                type: [],
                resource: '',
                desc: ''
            },
            day:'',
            editFormVisible:false,
            items:[
                {content:'内容1'},
                {content:'内容2'},
                {content:'内容3'},
                {content:'内容4'}
            ],
        },
        methods:{
            search:function(){

            },
            addClick:function(){
                this.editFormVisible=true;

            },
            checkInfo:function(){
                this.editFormVisible=true;
            },
            submitClick(formName){
                this.$refs[formName].validate((valid) =>{
                    if (valid){
                        this.$message({
                            type:'success',
                            message:'保存成功'
                        })
                    }else{
                        this.$message({
                            type:'error',
                            message:'输入内容不能为空'
                        })
                    }
                });
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });

            },
            delCard(){

            }

        },

        created:function(){

            this.day = TimeUtil.convertToString(new Date()).substr(0,10);
            this.form.date2 = TimeUtil.convertToString(new Date()).substr(0,10);
            this.form.date1 = TimeUtil.convertToString(new Date()).substr(0,10);
        },
        mounted:function(){

        }
    });


</script>

</body>
<style>

</style>
</html>
